<template>
  <div class="play">
    <div class=" header">
      <div class="title">
        <router-link to="">
          <i></i>
          </router-link>
          <div class="music-info">
            <p>{{ musicInfo.songinfo.title }}</p>
            <p class="author">{{ musicInfo.songinfo.author }}</p>
          </div>
          <router-link to="">
            <i></i>
          </router-link>
      </div>

      <div class="song-info">
        <div class="song-info-img">
          <img :src="musicInfo.songinfo.pic_big" alt="">
         <Lrc :currentTime="currentTime" :durationTime ="durationTime" :songLrc="this.$route.params.songId">
         </Lrc>
        </div>
        <div class="iconbox">
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>

    </div>
      <div class="song">
        <audio ref="player" :src="musicInfo.bitrate.show_link" controls autoplay></audio>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import '../assets/font/iconfont.css'
// import Lrc from '../components/Lrc'
// 异步加载Lrc组件 让歌词比唱进度快或者慢
const Lrc = Vue.component("lrc",(resolve) => require(["../components/Lrc"],resolve))

export default {
  name: 'musicPlay',
  data() {
    return {
      musicInfo: {
        songinfo: {
          title: "",
          author: ""
        },
        bitrate: {
          show_link: ""
        }
      },
      currentTime: 0,
      durationTime: 0
    }
  },
  mounted() {
    const playUrl = 'baidu_music_api/v1/restserver/ting?method=baidu.ting.song.play&songid=' + this.$route.params.songId
    this.$axios.get(playUrl)
    .then(res => {
      console.log(res.data)
      this.musicInfo = res.data
    })
    .catch(err => {
      console.log('请求错误' + err)
    })
     // 挂载时调用监听函数
    this.addEventListeners()
  },
   beforeDestroy() {
    this.removeEventListeners()
  },
  components: {
    Lrc
  },
  methods: {
    addEventListeners() {
      this.$refs.player.addEventListener('timeupdate', this._currentTime)
      this.$refs.player.addEventListener('canplay', this._durationTime)
    },
    removeEventListeners() {
      this.$refs.player.removeEventListener('timeupdate', this._currentTime)
      this.$refs.player.removeEventListener('canplay', this._durationTime)
    },
    _currentTime() {
      this.currentTime = this.$refs.player.currentTime
      // currentTime 是audio标签提供的获取当前播放的方法
    },
    _durationTime() {
      this.durationTime = this.$refs.player.duration
      // duration 是audio提供的获取当前歌曲整体时间的方法
    }
  }
}
</script>

<style scoped>
  .header {
    padding: 15px;
  }
  .title {
    display: flex;
    text-align: center;
  }
  .music-info {
    flex: 1;
    font-size: 20px;
  }
  .left,
  .right {
    font-size: 20px;
  }
  .song-info {
    padding: 15px;
  }
  .song-info-img {
    text-align: center;
  }
 .song-info-img img{
	width: 50%;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(50,50,50,.31);
}

.song-lrc {
	margin-top: 10px;
  min-height: 50px;
}

.iconbox {
	display: flex;
	margin-top: 30px;
}

.iconbox .box {
	flex: 1;
}

.song {
	width: 100%;
	text-align: center;
}

.song audio {
	width: 80%;
}

.active {
  color: #222;
}

.author {
  font-size: 12px;
  color: #999;
}

</style>
